iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
Cloud

Xamarin.Forms, ASP.NET Core WEB API搭配AZURE的網站服務與資料庫服務整合應用實例系列 第 17

Day17 - Azure Blob storage Part2 Azure上下傳檔案測試

  • 分享至 

  • xImage
  •  

首先來看一下Azure Blob storage服務種類, 可以分為底下四類, 本範例預計採用的是檔案這項服務
http://ithelp.ithome.com.tw/upload/images/20161226/20103333S5e5Lpt7CS.png

先點擊專案的Reference, 按下右鍵, 點選Add Connected Service如下
http://ithelp.ithome.com.tw/upload/images/20161226/201033339g1b1bTWak.png

點選 Azure Storage, 按下Configure
http://ithelp.ithome.com.tw/upload/images/20161226/20103333r6NLdHyjgy.png

按下Reenter your credentials登入Azure
http://ithelp.ithome.com.tw/upload/images/20161226/20103333Jor3K844Kt.png

登入成功之後, 會列出目前儲存體的清單, 按下Create a New Storage Account來新增一個新儲存體
http://ithelp.ithome.com.tw/upload/images/20161226/20103333IaPecYWC8j.png

在Name欄位填入名稱, 其他採預設選項, 然後按下Create
http://ithelp.ithome.com.tw/upload/images/20161226/201033334rjbtXY1HP.png

之後在列表就可以看到新的儲存體, 按下Add
http://ithelp.ithome.com.tw/upload/images/20161226/20103333tfsFNeJ92D.png

之後開始跑進度條, 看到error, 心知不妙啊/images/emoticon/emoticon04.gif
http://ithelp.ithome.com.tw/upload/images/20161226/20103333O0XjK9neTp.png

跑完之後, 果然報錯, 看到error說不支援.NETCoreApp 1.0版
http://ithelp.ithome.com.tw/upload/images/20161226/20103333cj4ur7y90D.png

接著把心一橫, 把所有1.0都調成1.1, 不然就是調成最新的版本
http://ithelp.ithome.com.tw/upload/images/20161226/20103333BPuqQgy6Bm.png

調整之後, error是消失了, 但是出現了驚嘆號, 不過重新建置專案後, 沒有任何錯誤訊息, 就不管它了, 當作它應該沒問題
http://ithelp.ithome.com.tw/upload/images/20161226/201033339bsVmSbpCR.png

經過Add Connected Service這個步驟之後, 就會產生如下圖的目錄
http://ithelp.ithome.com.tw/upload/images/20161226/20103333V4EpbRUsvp.png

接著參考底下這篇
https://docs.microsoft.com/en-us/azure/storage/vs-storage-aspnet5-getting-started-blobs

在AppController.cs, 試著加入上傳到Azure的函式, 但是遇到底下的叫用函式不存在的錯誤
http://ithelp.ithome.com.tw/upload/images/20161226/20103333JZzseYJUv2.png

接著找到這篇, 說是要安裝Microsoft.WindowsAzure.ConfigurationManager
https://amoghnatu.net/2016/10/04/resolving-cloudconfigurationmanager-does-not-exist-in-the-current-context-compiler-error/

於是在NuGet找到後安裝
http://ithelp.ithome.com.tw/upload/images/20161226/20103333XzOGU54KVU.png

結果一樣不支援.NETCoreApp 1.0版, 這時候有點小火了
http://ithelp.ithome.com.tw/upload/images/20161226/20103333SHw4LyIedl.png

結果搜尋了N篇, 找到這篇,
http://stackoverflow.com/questions/30575689/how-do-we-use-cloudconfigurationmanager-with-asp-net-5-json-configs
Microsoft大神 Scott Hanselman 說ASP.NET 5不用CloudConfigurationManager了, 什麼?不用了 不用了 不用了, 到這火上來了/images/emoticon/emoticon18.gif, 因為上述這篇, 用的就是ASP.NET 5, 而且文章發佈日是2016/12/2,
http://ithelp.ithome.com.tw/upload/images/20161226/20103333ExRAat7zoT.png

所以Microsoft的官方文件是在鬼打牆膩?還是已經過時了, 過時要更新啊, 讓人白做了半天工, 事已至此, 決定聽從Scott的建議, 也不用讀config的方式, 決定把Azure Storage連線資訊放在AppController.cs的靜態字串裡

打開config.json
http://ithelp.ithome.com.tw/upload/images/20161226/20103333ukr4KNnDOq.png

在AppController.cs裡, 宣告一個靜態的字串放入在config.json找到的連線資訊
http://ithelp.ithome.com.tw/upload/images/20161226/20103333knT7Kju0kz.png

並加入Microsoft.WindowsAzure.Storage的參考
http://ithelp.ithome.com.tw/upload/images/20161226/20103333vDuErcjFvH.png

接著在AppController.cs裡, 加入上傳檔案到Azure的函式, 程式碼如下
http://ithelp.ithome.com.tw/upload/images/20161226/20103333Fz1bNFGgyI.png

在AppController.cs裡, 加入從Azure下載檔案的函式, 程式碼如下
http://ithelp.ithome.com.tw/upload/images/20161226/20103333AnBoscKt58.png

修改FileUpload函式, 加入Azure上下傳功能, 並把從Azure的下載到本地端的連結丟回給前端的View
http://ithelp.ithome.com.tw/upload/images/20161226/20103333wU2zoday0D.png

接著在wwwroot的目錄下新增azure的資料夾用來接收從Azure來的檔案
http://ithelp.ithome.com.tw/upload/images/20161226/20103333WPpZ6mjvRm.png

接著跑起來測試看看, 成功畫面如下
http://ithelp.ithome.com.tw/upload/images/20161226/20103333dtqFq69fnc.png

到Azure Portal檢查是否有成功上傳? 完成畫面如下
http://ithelp.ithome.com.tw/upload/images/20161226/20103333UEAugNDqlj.pnghttp://ithelp.ithome.com.tw/upload/images/20161226/201033334OO9s8rayC.png

本文參考底下兩篇文章實作
https://docs.microsoft.com/en-us/azure/vs-azure-tools-connected-services-storage
https://docs.microsoft.com/zh-tw/azure/storage/vs-storage-aspnet5-getting-started-blobs

後記: 在實作的這篇的時候, 真的是寫到想翻桌/images/emoticon/emoticon40.gif, 被Microsoft官方文件給搞到, 彷彿掉到Rabbit hole.


上一篇
Day16 - Azure Blob storage Part1 本地端上傳檔案測試
下一篇
Day18 - Azure Mobile App & Azure Notification Hubs Part1 Windows篇
系列文
Xamarin.Forms, ASP.NET Core WEB API搭配AZURE的網站服務與資料庫服務整合應用實例32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言